<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- 

http://docstore.mik.ua/orelly/webprog/jscript/ch18_03.htm penting belajar javascript 
http://help.dottoro.com/ljkmgbpx.php

-->
<head>
<title>Class Selector</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://gr-blogtools.googlecode.com/svn/js/ie/nggoie.obus.js">IE7_PNG_SUFFIX=".png"</script> 




<style>
.klb{background:#ff00ff;color:#f00;width:200px;}
.htm{background:#ffff00;color:#000;width:400px;}
.pth{background:#00ff00;color:#ff0;width:600px;}
#klba{background:#ff00ff;color:#f00;width:200px;}
#htma{background:#ffff00;color:#000;width:400px;}
#ptha{background:#00ff00;color:#ff0;width:600px;}
a.gr_button{color:#000;line-height:20px;position:relative;display:inline-block;text-decoration:none;padding:0 6px;margin-right:5px;bottom:13px;box-shadow:none;outline:none;}
textarea{background-color:#ff00ff;}


div.transOFF {width: 300px; background-color: red;border:10px solid black; } 
div.transON {width: 900px; background-color: green;opacity:.50;filter: alpha(opacity=50); opacity: 0.5;border:5px solid black; } 
div.trans25 {width: 100%; background-color: blue;opacity:.25;filter: alpha(opacity=25); opacity: 0.25;border:5px solid black; } 
div.trans75 {width: 100%; background-color: orange;opacity:.75;filter: alpha(opacity=75); opacity: 0.75;border:5px solid black; }

</style>
<script>
<!--
function cGRp(){
document.getElementById("code").setAttribute("class","pth");
}
function cGRh(){
document.getElementById("code").setAttribute("class","htm");
}
function cGRk(){
document.getElementById("code").setAttribute("class","klb");
}
//-->
</script>

</head>

<body>

<div id="yu" style="width:500px;height:50px;margin:20px auto;border:2px solid red;"></div>
<hr>
<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE.  It also works in current versions of Opera.</p></div>
<hr/>
<div class="transOFF" onmouseover="document.getElementById('yu').className='transON'" onmouseout="document.getElementById('yu').className='transOFF'"><p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE.  It also works in current versions of Opera.</p></div>
<hr/>



<hr/>
<button class="gr_button" onMouseover="javascript:cGRp()">GREEN</button><button class="gr_button" onMouseover="javascript:cGRh()">RED</button><button class="gr_button" onMouseover="javascript:cGRk()">Default</button>
<hr/>
<a class="gr_button" href="javascript:cGRp()">GREEN</a><a class="gr_button" href="javascript:cGRh()">RED</a><a class="gr_button" href="javascript:cGRk()">Default</a>
<hr/>
<textarea class=klb id=code name=zzGR cols=110 rows=10></textarea>
<br/>
http://www.eyecon.ro/colorpicker/<br/>
http://jscolor.com/try.php
<br/>

    <script type ="text/javascript" >

    function onMouseMove()
    {
    document.getElementById("q1").style.backgroundColor ='#f00';
    document.getElementById("q1").style.Width ='900';
    document.getElementById("q1").filters.alpha.opacity='20';
document.getElementById("q1").style.opacity='0.2';
    document.body.style.cursor = 'hand';
    }
    function onMouseLeave()
    {

document.getElementById("q1").style.backgroundColor ="#f0f";
    document.body.style.cursor = "default";
    }
    </script>
<hr/>
<div id="q1" style="width: 608px; height: 100px;border:1px solid #000;filter:alpha(opacity=100);opacity:1.0;"></div>
<script>
<!--
function dGRp(){
document.getElementById("cod").setAttribute("Id","pth");
}
function dGRh(){
document.getElementById("pth").setAttribute("Id","cod");
}
//-->
</script>
<hr/>
    <div onMouseOver="onMouseMove()" onMouseOut="onMouseLeave()" style="font-size:27px;">Gerakkan cursor di sisni!
    </div>

<hr/>
<a class="gr_button" onMousemove="javascript:dGRp()">WHITE</a><a class="gr_button" onMousemove="javascript:dGRh()">BLACK</a><a class="gr_button" href="javascript:dGRk()">Default</a>
<hr/>
<textarea class="klp klb" Id=cod name=cod cols=110 rows=10></textarea>
<style>
.klb{background:#ff00ff;color:#f00;width:200px;}
.htm{background:#ffff00;color:#000;width:400px;}
.pth{background:#00ff00;color:#ff0;width:600px;}
#klb{background:#ff00ff;color:#f00;width:200px;}
#htm{background:#ffff00;color:#000;width:400px;}
#pth{background:#00ff00;color:#ff0;width:600px;}
.klp{border:10px solid red;}
a.gr_button{color:#000;line-height:20px;position:relative;display:inline-block;text-decoration:none;padding:0 6px;margin-right:5px;bottom:13px;box-shadow:none;outline:none;}
textarea{background-color:#ff00ff;}
</style>
</body>
</html>